<template>
  <div style="padding-left: 20px;">
    <el-card>
      <div style="display: flex;justify-content: flex-start;align-items: center;">
        <img alt="" :src="imgHead" style="width: 100px;height: 100px;border-radius: 50%">
        <span
            style="font-size: 22px;margin-left: 20px">{{
            timeDay > 18 ? '晚上好' : timeDay >= 12 ? '下午好' : '早上好'
          }}，管理员，请开始你的工作吧!</span>
      </div>
    </el-card>
    <el-row :gutter="18" type="flex" style="margin-top: 20px">
      <el-col :span="3">
        <div class="grid-content bg-purple" @mouseover="show" @mouseleave="leave">
          <el-card>
            <div class="cardNav"><i class="el-icon-user iconUser"></i><span>用户</span></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" @mouseover="show" @mouseleave="leave">
          <el-card>
            <div class="cardNav"><i class="el-icon-reading iconNews"></i><span>文章</span></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" @mouseover="show" @mouseleave="leave">
          <el-card>
            <div class="cardNav"><i class="el-icon-data-line iconMsa"></i><span>分析</span></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!--  展示区-->
    <div style="margin-top: 20px">
      <el-row :gutter="30">
        <!--        最近发布-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <span >最近发布</span>
              </div>
              <ul style="font-size: 12px" v-for="newsList in RecentlyReleas" :key="newsList.article_id">
                <li style="display: flex;justify-content: space-between;align-items: center">
                  <div>{{ newsList.article_title }}</div>
                  <div style="display: flex;align-items: center;justify-content: space-between;width: 150px">
                    <div style="display: flex;align-items: center"><img :src="newsList.user_icon?newsList.user_icon:imgHead" alt="" style="height: 30px;width: 30px;border-radius: 50%"><span
                        style="margin-left: 10px">{{ newsList.user_name }}</span>
                    </div>
                    <span>{{$moment(newsList.putout_time).fromNow() }}</span></div>
                </li>
              </ul>
            </el-card>
         
          </div>
        </el-col>
        <!--        作者排行-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>作者排行</span>
              </div>
             <ul style="font-size: 12px" v-for="Release in DeltaRelease" :key="Release.user_id">
               <li style="display: flex;justify-content: space-between;padding-bottom: 5px">
                 <div style="display: flex;align-items: center"><img :src="Release.user_icon?Release.user_icon:imgHead" alt="" style="height: 30px;width: 30px;border-radius: 50%">
                   <span style="padding-left: 5px">{{Release.user_name}}</span></div>
                 <div style="display: flex;align-items: center">总发布量：{{Release.sum}}</div>
               </li>
             </ul>
            </el-card>
          </div>
        </el-col>
        <!--本月发布量-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>本月发布量</span>

              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import {mixin} from "@/mixin/mixin";

export default {
  name: "InDex",
  mixins: [mixin],
  data() {
    return {
      imgHead: require('../../../public/img/Myphoto.jpg'),
      timeDay: '',
      RecentlyReleas: '',
      DeltaRelease:''
    }
  },
  methods: {
    show(e) {
      e.currentTarget.className = 'show'
    },
    leave(e) {
      e.currentTarget.className = ''
    }
  },
  mounted() {
    this.timeDay = new Date().getHours()
  },
  created() {
    //最近发布
    this.$api.adminApi.RecentNews().then(value => {
      this.RecentlyReleas = value
    })
    //作品发布数量排行
    this.$api.adminApi.ReleaseQuantity().then(value => {
      this.DeltaRelease=value
    })
  }
}
</script>

<style scoped>
.iconUser {
  color: #20a0ff;
  font-size: 40px;
}

.iconNews {
  color: #95de64;
  font-size: 40px;
}

.iconMsa {
  color: #ff9c6e;
  font-size: 40px;
}

.cardNav {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cardNav span {
  margin-top: 10px;
}

.show {
  box-shadow: -2px 5px 10px 2px rgb(0, 0, 0, 0.2);
}

.box-card {
  height: 400px;
  overflow: auto;
}

</style>